<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view class="Recharge">
			<view class="Recharge-top">
				<view class="home-head">
					<view class="home-heads">
						<view class="heads-txt">设备号:464654894764</view>
						<view class="heads-img" @click="Copy">
							<image src="/static/fz.png" mode=""></image>
						</view>
					</view>
					<view class="home-heads-btm">当前账户余额: 90.2元</view>
				</view>
			</view>

			<view class="recharge-head">
				<view class="head-li" v-for="(item,index) in WalletList" :key="index" :class="{ShouDongStatusSe:HomeState == item.id}" @click="liClick(item,index)">
					<view class="li-post">
						<view class="li-post-img">
							<image src="/static/o1.png" mode=""></image>
						</view>
						
						<view class="li-post-txt">{{item.bonusPrice}}</view>
					</view>
					<view class="head-li-num">{{item.payPrice}} <span>元</span></view>
					<view class="head-li-txt">{{item.name}}</view>
				</view>
			</view>

			<view class="recharge-txt">
				<view class="recharge-txt-one">温馨提示:</view>
				<view class="recharge-txt-two">1、可使用余额购买流量套餐</view>
				<view class="recharge-txt-two">2、更多充值优惠，请联系在线客服</view>
			</view>

			<view class="recharge-zf">
				<view class="recharge-zf-txt">支付方式</view>
				<view class="recharge-zfs">
					<view class="recharge-zf-left">
						<view class="zf-left-img">
							<image src="/static/index/wx.png" mode=""></image>
						</view>
						<view class="zf-left-txt">微信支付</view>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 1">
						<image src="/static/qq1.png" mode=""></image>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 0">
						<image src="/static/qq2.png" mode=""></image>
					</view>
				</view>
				<view class="recharge-zfs">
					<view class="recharge-zf-left">
						<view class="zf-left-img">
							<image src="/static/index/zfb.png" mode=""></image>
						</view>
						<view class="zf-left-txt">支付宝支付</view>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 0">
						<image src="/static/qq1.png" mode=""></image>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 1">
						<image src="/static/qq2.png" mode=""></image>
					</view>
				</view>
			</view>


			<view class="recharge-quan" @click="YouHuiQuan">
				<view class="quan-left">
					<view class="quan-left-img">
						<image src="/static/quan.jpg" mode=""></image>
					</view>
					<view class="quan-left-txt">优惠券</view>
				</view>
				<view class="quan-rig">
					<view class="quan-rig-txt">-5元</view>
					<view class="quan-rig-img">
						<image src="/static/yu.jpg" mode=""></image>
					</view>
				</view>
			</view>

		</view>


		<view class="Recharge-btm">
			<view class="Recharge-btms">
				<view class="btm-left">合计: <span>￥ 295.00 元</span></view>
				<view class="btm-rig">订购</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" background-color="#ffffff">
			<view class="popups">
				<view class="popups-yhq">优惠券</view>
				<view class="coupon">
					<view class="coupon-li" v-for="item in 5">
						<view class="li-left">
							<view class="li-left-one">
								<view class="li-left-one-num"><span>¥</span>10</view>
								<view class="li-left-one-txt">满100元可用</view>
							</view>
							<view class="li-left-twp">
								<view class="li-left-twp-top">套餐满减券</view>
								<view class="li-left-twp-head">2025-04-16到期</view>
								<view class="li-left-twp-btm">仅订购套餐可以使用</view>
							</view>
						</view>
						<view class="li-rig" @click="yhqClick(item,index)">使用</view>
					</view>
				</view>
			</view>
			<view style="padding-bottom:80rpx;"></view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px",
				monyState:1,	//0支付宝  1微信
				HomeState:1,
				
				WalletList:[],	//余额充值数据列表
			}
		},
		onLoad() {
			this.GaoDu() //判断手机高度
		},
		onShow() {
			this.thaliWallet()	//钱包充值套餐信息列表
		},
		methods: {
			thaliWallet(){
				this.$REQ(this.$api.thaliWallet, {
				}, 'POST').then(res => {
					console.log(res)
					this.WalletList = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			liClick(item,index){
				console.log(item,index)
				this.HomeState = item.id
			},
			YouHuiQuan(){
				this.$refs.popup.open('bottom')
			},
			// 使用优惠券
			yhqClick(item){
				console.log(item)
				this.$refs.popup.close()
			},
			Copy() {
				uni.setClipboardData({
					data: '123123123123', // 需要复制的内容
					success: () => {
						// 成功提示框显示 1 秒钟
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 1000
						});
					},
					fail: () => {
						// 失败提示框显示 1 秒钟
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import url("@/pages/css.css");
	.index {
		width: 100%;
		height: 100%;
		background: #ECF4FF;
	}

	.Recharge {}

	.Recharge-top {
		padding-top: 25rpx;
	}

	.home-head {
		margin: 0rpx 25rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 0px 6px -2px #888889;
	}

	.home-heads {
		display: flex;
		padding: 25rpx 30rpx;

	}

	.heads-txt {
		font-size: 28rpx;
		line-height: 45rpx;
		color: #F4AE54;
	}

	.heads-img {
		width: 45rpx;
		height: 45rpx;
		padding-left: 20rpx;
	}

	.heads-img image {
		width: 100%;
		height: 100%;
	}

	.home-heads-btm {
		color: #7D6DD9;
		font-size: 28rpx;
		padding: 0rpx 30rpx 30rpx 30rpx;
	}

	.recharge-head {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 25rpx;
	}

	.head-li {
		width: 31%;
		background: #ffffff;
		border: 3rpx solid #E9EEF9;
		border-radius: 15rpx;
		position: relative;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.ShouDongStatusSe{
		background: #ECF4FF;
		border: 3rpx solid #C8DEF3;
	}

	.head-li-num {
		font-size: 45rpx;
		font-weight: 600;
		color: #5876E5;
		text-align: center;
		padding-top: 40rpx;
	}

	.head-li-num span {
		font-size: 32rpx;
		padding-left: 10rpx;
	}

	.head-li-txt {
		text-align: center;
		font-size: 30rpx;
		color: #8F98AA;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
	}

	.li-post {
		position: absolute;
		top: -30rpx;
		left: 30rpx;
	}

	.li-post-img {
		width: 170rpx;
		height: 60rpx;
		position: relative;
	}

	.li-post-img image {
		width: 100%;
		height: 100%;
	}

	.recharge-txt {
		padding: 0rpx 25rpx 25rpx;
	}

	.recharge-txt-one {
		font-size: 35rpx;
		color: #F3AC4A;
		font-weight: 600;
		padding-bottom: 20rpx;
	}

	.recharge-txt-two {
		font-size: 28rpx;
		padding-bottom: 10rpx;
	}

	.recharge-zf {
		padding: 25rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 25rpx;
	}

	.recharge-zf-txt {
		font-size: 38rpx;
		font-weight: 600;
	}

	.recharge-zfs {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.recharge-quan {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 25rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 25rpx;
	}

	.quan-left {
		display: flex;

	}

	.quan-left-img {
		width: 50rpx;
		height: 50rpx;

	}

	.quan-left-img image {
		width: 100%;
		height: 100%;
	}

	.quan-left-txt {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 50rpx;
		padding-left: 10rpx;
	}

	.quan-rig {
		display: flex;
	}

	.quan-rig-img {
		width: 40rpx;
		height: 50rpx;
	}

	.quan-rig-img image {
		width: 100%;
		height: 100%;
	}

	.quan-rig-txt {
		line-height: 50rpx;
		padding-right: 15rpx;
		font-size: 28rpx;
		color: #5789D0;
	}

	.Recharge-btm {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background: #ffffff;
		width: 100%;


	}

	.Recharge-btms {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 30rpx 30rpx 50rpx;
	}

	.btm-left {
		font-size: 32rpx;
		color: #7A7A7A;
		line-height: 90rpx;
	}

	.btm-left span {
		color: #148BF8;
	}

	.btm-rig {
		width: 350rpx;
		height: 90rpx;
		border-radius: 100rpx;

		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		font-size: 32rpx;
		background-image: linear-gradient(to right, rgba(58, 101, 255), rgba(148, 103, 254));
	}

	.recharge-zf-left {
		display: flex;
		padding-top: 30rpx;
	}

	.zf-left-img {
		width: 60rpx;
		height: 60rpx;
	}

	.zf-left-img image {
		width: 100%;
		height: 100%;
		border-radius: 100rpx;
	}

	.zf-left-txt {
		font-size: 32rpx;
		padding-left: 20rpx;
		font-weight: 600;
		line-height: 60rpx;
	}

	.recharge-zf-rig {
		width: 45rpx;
		height: 45rpx;
		padding-top: 30rpx;
	}

	.recharge-zf-rig image {
		width: 100%;
		height: 100%;
	}
	.popups{
		height: 900rpx;
		padding: 25rpx;
		
		
	}
	.popups-yhq{
		padding: 25rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx
	}
	.coupon{
			height: 100%;
			padding: 25rpx;
			overflow: auto;
		}
		.coupon-li{
			padding: 25rpx 30rpx;
			background: #fff;
			display: flex;
			border-radius: 20rpx;
			flex-wrap: nowrap;
			justify-content:space-between;
			margin-bottom: 30rpx;
		}
		.li-left{
			display: flex;
		}
		.li-left-one{
		}
		.li-left-one-num{
			padding-top: 20rpx;
			color: #FF6968;
			text-align: center;
			font-size: 42rpx;
			font-weight: 600;
		}
		.li-left-one-num span{
			font-size: 28rpx;
			padding-right: 5rpx;
		}
		.li-left-one-txt{
			font-size: 28rpx;
			font-weight: 500;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}
		
		.li-left-twp{
			padding-left: 25rpx;
			margin-left: 25rpx;
			border-left: 3rpx solid #eee;
		}
		
		.li-rig{
			width: 150rpx;
			height: 60rpx;
			border-radius: 100rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #fff;
			background: #FF6968;
			margin-top: 50rpx;
		}
		.li-left-twp-top{
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 20rpx;
		}
		.li-left-twp-head{
			font-size: 26rpx;
			color: #999;
		}
		.li-left-twp-btm{
			font-size: 26rpx;
			color: #999;
			padding-top: 20rpx;
		}
		.li-post-txt{
			position: absolute;
			top: 10rpx;
			left: 0rpx;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 600;
		}
</style>